<template>
  <view>
    <u-cell-group>
      <u-cell-item title="设计类型" :arrow="false" v-if="!form.DesignType && !isApply">
        <u-radio-group @change="onTypeChange" v-model="designType">
          <view class="grid-2">
            <u-radio name="DoorPlane">店内画面设计</u-radio>
            <u-radio name="OutDoorAdvertising">户外广告</u-radio>
            <u-radio name="Media">1+1媒体</u-radio>
          </view>
        </u-radio-group>
      </u-cell-item>

      <template v-else>
        <u-cell-item title="设计类型" :arrow="false">
          <u-checkbox-group @change="handleDesignTypeChange">
            <view style="padding-left: 30rpx;" v-if="form.ApplyObjectType == 3 || form.ApplyObjectType == 5">
              <u-checkbox v-model="item.checked" v-for="(item, index) in designTypeList" :name="item.value">
                {{ item.label }}
              </u-checkbox>
            </view>

            <view style="padding-left: 30rpx;" v-if="form.ApplyObjectType == 4">
              <u-checkbox v-model="item.checked" v-for="(item, index) in designTypeList" :name="item.value">
                {{ item.label }}
              </u-checkbox>
            </view>
          </u-checkbox-group>
        </u-cell-item>
      </template>

      <u-cell-item title="设计需求" :arrow="false">
        <view class="u-flex-col u-col-bottom">
          <u-input
            style="width: 90%;"
            type="textarea"
            :border="true"
            v-model="form.Remark"
            inputAlign="right"
            placeholder="请输入设计需求"
          ></u-input>
        </view>
      </u-cell-item>
      <u-cell-item title="现场初始图" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
      <u-cell-item style="padding: 10rpx;" :arrow="false">
        <image-upload @change="onImageChange" v-model="imageList"></image-upload>
      </u-cell-item>
      <u-cell-item style="padding: 10rpx;" :arrow="false">
        <file-picker @change="onFileChange" v-model="fileList"></file-picker>
      </u-cell-item>

      <block v-if="showDesignPhoto">
        <u-cell-item title="设计小样图" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
        <u-cell-item style="padding: 10rpx;" :arrow="false">
          <image-upload @change="onDesignImageChange" v-model="designImageList"></image-upload>
        </u-cell-item>
        <u-cell-item style="padding: 10rpx;" :arrow="false">
          <file-picker @change="onDesignFileChange" v-model="designFileList"></file-picker>
        </u-cell-item>
      </block>

      <block v-if="showAudit">
        <u-cell-item title="审核状态" :arrow="false"></u-cell-item>
        <u-cell-item title="初审意见" :arrow="false"></u-cell-item>
        <u-cell-item title="复审意见" :arrow="false"></u-cell-item>
        <u-cell-item title="终审意见" :arrow="false"></u-cell-item>
      </block>
    </u-cell-group>
  </view>
</template>

<script>
export default {
  name: 'design-information-form',
  props: {
    showAudit: {
      type: Boolean,
      default: true
    },
    showDesignPhoto: {
      type: Boolean,
      default: false
    },
    isApply: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imageList: [],
      fileList: [],

      designImageList: [],
      designFileList: [],

      // designTypeList: [{ name: '店内画面设计', value: 1, checked: false }, { name: '户外广告', value: 2, checked: false }, { name: '1+1媒体', value: 3, checked: false }],

      // 1 ：门头设计
      // 2 ：1+1媒体设计
      // 3 ：店内装修平面设计
      // 4 ：展会平面设计
      // 5 ：营销活动平面设计
      // 6 ：区域会议设计
      // 7 ：专卖店开业
      // 8 ：其他设计

      // 9 ：公司活动的平面设计
      // 10：线上媒体传播页面设计
      // 11：单页设计
      // 12：展示平面设计
      // 13：机器外观设计
      // 14：其他设计

      // 渠道其他画面设计（ObjectType=5）使用此多选项：GraphicDesigns
      // 总部设计（ObjectType=4）使用此多选项：HeadquartersDesigns
      // 店内&展会平面设计（ObjectType=3）使用此多选项：OtherDesigns

      designTypeList: [
        { label: '门头设计', value: '1', checked: false },
        { label: '1+1媒体设计', value: '2', checked: false },
        { label: '店内装修平面设计', value: '3', checked: false },
        { label: '展会平面设计', value: '4', checked: false },
        { label: '营销活动平面设计', value: '5', checked: false },
        { label: '区域会议设计', value: '6', checked: false },
        { label: '专卖店开业', value: '7', checked: false },
        { label: '其他设计', value: '8', checked: false },

        { label: '公司活动的平面设计', value: '9', checked: false },
        { label: '线上媒体传播页面设计', value: '10', checked: false },
        { label: '单页设计', value: '11', checked: false },
        { label: '展示平面设计', value: '12', checked: false },
        { label: '机器外观设计', value: '13', checked: false },
        { label: '其他设计', value: '14', checked: false }
      ],

      DoorPlane: false,
      // 户外广告
      OutDoorAdvertising: false,
      // 1+1 媒体
      Media: false,

      Store_Location_List: [],

      designType: '',

      form: {
        // 申请类型 1.门头 2.专卖店 3.其他
        // 渠道其他画面设计（ObjectType=5）使用此多选项：GraphicDesigns
        // 总部设计（ObjectType=4）使用此多选项：HeadquartersDesigns
        // 店内&展会平面设计（ObjectType=3）使用此多选项：OtherDesigns
        ApplyObjectType: '',
        // 设计需求
        Remark: '',
        // 现场初始图
        InitialPhotoList: [],
        DesignPhotoList: [],
        // 店内平面
        DoorPlane: 0,
        // 户外广告
        OutDoorAdvertising: 0,
        // 1+1 媒体
        Media: 0,

        DesignType: ''
      }
    };
  },

  methods: {
    onTypeChange(e) {
      if (e) {
        if (e.indexOf('DoorPlane') > -1) {
          this.form.DoorPlane = 1;
        } else {
          this.form.DoorPlane = 0;
        }

        if (e.indexOf('OutDoorAdvertising') > -1) {
          this.form.OutDoorAdvertising = 1;
        } else {
          this.form.OutDoorAdvertising = 0;
        }

        if (e.indexOf('Media') > -1) {
          this.form.Media = 1;
        } else {
          this.form.Media = 0;
        }
      }
    },

    handleDesignTypeChange(e) {
      this.form.DesignType = e.join(',');
    },

    initForm(data) {
      if (data.InitialPhotoList) {
        this.form.InitialPhotoList = data.InitialPhotoList;
        this.imageList = this.form.InitialPhotoList.filter(item => item.TypeId == 1);
        this.fileList = this.form.InitialPhotoList.filter(item => (item.TypeId = 4));
      }

      if (data.DesignPhotoList) {
        this.form.DesignPhotoList = data.DesignPhotoList;
        this.designImageList = this.form.DesignPhotoList.filter(item => item.TypeId == 1);
        this.designFileList = this.form.DesignPhotoList.filter(item => (item.TypeId = 4));
      }

      if (data.ApplyObjectType) {
        this.form.ApplyObjectType = data.ApplyObjectType;
      }

      if (data.Store_Location_List) {
        this.Store_Location_List = data.Store_Location_List;
      }

      if (data.DoorPlane && data.DoorPlane == 1) {
        this.DoorPlane = true;
        this.form.DoorPlane = 1;
        this.designType = 'DoorPlane';
      }
      if (data.OutDoorAdvertising && data.OutDoorAdvertising == 1) {
        this.OutDoorAdvertising = true;
        this.form.OutDoorAdvertising = 1;
        this.designType = 'OutDoorAdvertising';
      }
      if (data.Media && data.Media == 1) {
        this.Media == true;
        this.form.Media = 1;
        this.designType = 'Media';
      }

      if (data.Remark) {
        this.form.Remark = data.Remark;
      }

      if (data.DesignTypeList) {
        this.designTypeList = data.DesignTypeList.map(item => {
          return {
            label: item.Value,
            value: item.Key,
            checked: false
          };
        });
      }

      if (data.DesignType) {
        this.form.DesignType = data.DesignType;
        this.designTypeList.forEach(item => {
          if (data.DesignType.split(',').includes(String(item.value))) {
            item.checked = true;
          }
        });
      }
    },

    onImageChange(list) {
      const initialPhotoList = [];
      if (this.fileList.length > 0) {
        initialPhotoList.push(...this.fileList);
      }
      initialPhotoList.push(...list);
      this.form.InitialPhotoList = initialPhotoList;
    },

    onFileChange(list) {
      const initialPhotoList = [];
      if (this.imageList.length > 0) {
        initialPhotoList.push(...this.imageList);
      }
      initialPhotoList.push(...list);
      this.form.InitialPhotoList = initialPhotoList;
    },

    onDesignImageChange(list) {
      const designPhotoList = [];
      if (this.designFileList.length > 0) {
        designPhotoList.push(...this.designFileList);
      }
      designPhotoList.push(...list);
      this.form.DesignPhotoList = designPhotoList;
    },

    onDesignFileChange(list) {
      const designPhotoList = [];
      if (this.designImageList.length > 0) {
        designPhotoList.push(...this.designImageList);
      }
      designPhotoList.push(...list);
      this.form.DesignPhotoList = designPhotoList;
    },

    onDesignTypeChange(e) {
      if (e.indexOf(1) > -1) {
        this.form.DoorPlane = 1;
      } else {
        this.form.DoorPlane = 0;
      }
      if (e.indexOf(2) > -1) {
        this.form.OutDoorAdvertising = 1;
      } else {
        this.form.OutDoorAdvertising = 0;
      }
      if (e.indexOf(3) > -1) {
        this.form.Media = 1;
      } else {
        this.form.Media = 0;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.file-item {
  padding: 0 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
